//
@sidebar-nav-bg: #001529;
@sidebar-nav-sub-bg: #000c17;
@sidebar-nav-logo: #002140;
@sidebar-nav-selected-bg: #1890ff;
@sidebar-nav-selected-border-right: 3px solid hsla(0, 0%, 100%, .65); // transparent
@sidebar-nav-content-color: hsla(0, 0%, 100%, .65);
@sidebar-nav-content-hover-color: #fff;
@sidebar-nav-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
@sidebar-nav-overflow-x: hidde;
@top-bar-bg: #fff;
@top-bar-content-color: rgba(0, 0, 0, .65);
@top-bar-content-hover-color: @sidebar-nav-selected-bg;
@top-bar-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
@content-bg: #f8f8f8;
// 侧边栏===============侧边栏一级容器
.alain-default__aside {
    flex: 0 0 256px;
    margin-top: 0px;
    min-height: 100vh;
    box-shadow: @sidebar-nav-box-shadow;
    position: relative;
    z-index: 10;
}

.alain-default__collapsed .alain-default__aside {
    width: 80px;
}

.alain-default__aside-inner {
    // 侧边栏二级容器
    overflow: auto;
    display: block;
    min-height: 100vh;
    box-shadow: @sidebar-nav-box-shadow;
    position: relative;
    z-index: 10;
    background-color: @sidebar-nav-bg;
}

.alain-default__header-logo {
    // 侧边栏logo
    display: block;
    height: 64px;
    position: fixed;
    line-height: 64px;
    transition: all .3s;
    background: @sidebar-nav-logo;
    overflow: hidden;
    margin: 0px auto;
    box-shadow: @top-bar-box-shadow;
    z-index: 999;
}

.alain-default__aside-user-info {
    // 侧边栏用户信息
    color: @sidebar-nav-content-color;
}

.py-lg {
    padding-top: 88px !important;
}

.sidebar-nav {
    // 侧边栏菜单顶级节点
    background: @sidebar-nav-bg;
    border-right: 0px;
    .ant-menu-submenu>.ant-menu {
        // 侧边栏二级菜单下拉
        background-color: @sidebar-nav-sub-bg;
    }
    .ant-menu-item>a,
    .ant-menu-submenu>div {
        // 侧边栏菜单项内容(hover)颜色
        color: @sidebar-nav-content-color;
        &:hover {
            color: @sidebar-nav-content-hover-color;
        }
    }
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    // 侧边栏菜单项选中背景色
    background-color: @sidebar-nav-selected-bg;
    border-right: @sidebar-nav-selected-border-right;
    a {
        color:#fff;
    }
}

.cdk-overlay-pane {
    // 侧边栏菜单顶级节点
    border-right: 0px;
    .ant-menu-submenu>.ant-menu {
        // 侧边栏二级菜单下拉
        background-color: @sidebar-nav-sub-bg;
    }
    .ant-menu-item>a,
    .ant-menu-submenu>div {
        // 侧边栏菜单项内容(hover)颜色
        color: @sidebar-nav-content-color;
        &:hover {
            color: @sidebar-nav-content-hover-color;
        }
    }
}

.alain-default__fixed .alain-default__header{
    position: unset;
}

// 顶部菜单栏容器
.ant-layout-header {
    padding: 0px;
    background: @sidebar-nav-bg;
    z-index: 1;
}

// 顶部菜单栏
.alain-default__header {
    background: @top-bar-bg;
    box-shadow: @top-bar-box-shadow;
}

// 顶部菜单项
.alain-default__nav-item,
.alain-default__item {
    color: @top-bar-content-color;
    min-width: 38px;
    line-height: 60px;
    padding: 0px 2px;
    &:hover {
        color: @top-bar-content-hover-color;
    }
}

.alain-default__nav > .hidden-mobile{
    height: 60px;
    &:hover {
        background: @content-bg;
    }
}

.alain-default__nav-item,
.alain-default__nav nz-badge {
    color: @top-bar-content-color;
    &:hover {
        color: @top-bar-content-hover-color;
    }
}

// 顶部菜单图标
.alain-default__nav-item > i, .alain-default__nav-item-icon {
    font-size: 14px !important;
    transform: none !important;
}

.alain-default__collapsed {
    .ant-pro-content {
        display: flex;
        flex-direction: column;
        flex: auto;
        background: @content-bg;
        min-height: 0;
    }
}

// 菜单和内容响应式
@media (max-width: 767px) {
    .ant-layout-sider,
    .ant-pro-content {
        transition: transform 0.3s ease;
    }
    .ant-layout-sider {
        position: fixed;
    }
    .alain-default {
        .ant-pro-content {
            transform: translate3d(200px, 0, 0);
            min-height: 100vh;
        }
    }
    .alain-default__collapsed {
        .ant-layout-sider {
            transform: translate3d(-100%, 0, 0);
        }
        .ant-pro-content {
            transform: translateZ(0);
            min-height: 100vh;
        }
    }
}
